/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-05-10 15:18:27
 * @LastEditTime: 2023-11-10 11:16:11
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Flex,
  Popover,
  PopoverTrigger,
  Text,
  IconButton,
  PopoverContent,
  SimpleGrid,
  PopoverBody,
  Image,
} from '@chakra-ui/react';
import { RiCustomerService2Fill } from 'react-icons/ri';
import serviceImgSrc from 'assets/images/service.jpeg';
import tourflyImgSrc from 'assets/images/tourfly.jpeg';
const ServiceButton = () => {
  return (
    <Popover placement="top-start">
      <PopoverTrigger>
        <Flex position="absolute" bottom={7} left={2}>
          <IconButton
            colorScheme="teal"
            aria-label="联系我们"
            size="lg"
            icon={<RiCustomerService2Fill />}
          />
        </Flex>
      </PopoverTrigger>
      <PopoverContent
        bg="white"
        color="black"
        sx={{
          width: {
            base: '480px',
            xs: '260px',
            sm: '260px',
            md: '480px',
            lg: '480px',
          },
        }}
      >
        {/* <PopoverCloseButton bg="transparent" top="0.5" right="0.5" /> */}
        <PopoverBody p={4} w="full">
          <SimpleGrid
            columns={{ sm: 1, md: 2 }}
            spacing="8"
            textAlign="center"
            color="gray.400"
            w="full"
          >
            <Flex flexDirection="column" gap="2" align="center">
              <Image src={serviceImgSrc} maxW="220px" />
              <Text>客服微信</Text>
            </Flex>
            <Flex flexDirection="column" gap="2" align="center">
              <Image src={tourflyImgSrc} maxW="220px" />
              <Text>图蝇公众号</Text>
            </Flex>
          </SimpleGrid>
        </PopoverBody>
      </PopoverContent>
    </Popover>
  );
};

export default ServiceButton;
